<template>
  <!-- 底部 -->
  <div id="btbg">
    <div id="bottom">
      <ul>
        <li v-for="item in navList" :key="item.id">
          <div 
            :class="{item: true, sel: firstNavId == item.id}" 
            @click="navClick(item.id, item.path)"
          >
            {{ item.name }}
          </div>
        </li>
      </ul>
      地址：中国广东深圳市南山区科技园南区南大产学研大厦B区503
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 点击导航项
    navClick(id, path) {
      if (id === this.firstNavId && this.$route.path === path) return
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  display: flex;
  justify-content: center;
  list-style: none;
  li {
    padding: 0 5px;
    position: relative;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
    &::after {
      content: '|';
      position: absolute;
      right: 0;
      top: 0;
    }
    &:last-child::after {
      content: '';
    }
  }
}
#btbg {
  background: #0E1213;
  color: #fff;
  width: 100%;
  margin-top: 30px;
  height: 90px;
}

#bottom {
  width: 1000px;
  margin: auto;
  padding: 30px 0 0 0;
  text-align: center;
  color: #FFF;
}

#bottom a {
  color: #fff;
  text-decoration: none;
  padding: 0 5px;
}

#bottom a:hover {
  text-decoration: underline;
}
</style> 